import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import IphonexFit from 'components/IphonexFit';

export default class WptBanner extends Component {
    static propTypes = {
        container: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
        className: PropTypes.string,
    };

    static defaultProps = {
        className: '',
    };

    componentDidMount() {
        if (!this.props.container) {
            return;
        }
        $(this.props.container).css('minHeight', (document.documentElement.clientHeight || $(window).height()) - 50);
    }

    componentDidUpdate() {
        setTimeout(() => {
            $(this.props.container).css(
                'minHeight',
                (document.documentElement.clientHeight || $(window).height()) - 50
            );
        }, 20);
    }

    handleClick = (url) => {
        if (WPT.os.dyXcx || WPT.os.wpt) {
            return;
        }
        WPT.redirect(url);
    };

    render() {
        return (
            <IphonexFit className="iphoneX">
                <div className={cx('supportBanner', this.props.className)}>
                    由&nbsp;
                    <span
                        onClick={() => {
                            this.handleClick('//m.weipaitang.com/');
                        }}
                    >
                        微拍堂
                    </span>
                    &nbsp;免费技术支持
                </div>
            </IphonexFit>
        );
    }
}
